<!DOCTYPE html>
<html>

<head>
    <title>小郑同学</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <style>
        ul,
        li {
            list-style: none;
        }

        .xiang {
            height: 335px;
            width: 974px;
            margin: 0 auto;
            /* background-color: thistle; */
            margin-top: 20px;

        }

        .news {
            width: 974px;
            /* height: 223px; */
            margin: 0 auto;

        }

        .xuanze {
            display: flex;
            border-top: 1px solid rgba(216, 216, 216, 0.5);
        }

        .xuanze>li {
            width: 84px;
            height: 30px;
            color: #333333;
            border-color: #333333;
            font-size: 15px;
            margin-right: 25px;
            font-weight: bold;
            padding-top: 15px;

        }

        .p1 {
            font-size: 12px;
            height: 150px;
            font-family: 微软雅黑;
            text-indent: 2em;
            border-bottom: 1px solid rgba(216, 216, 216, 0.5);
            margin-bottom: 30px;
        }

        .p2 {
            height: auto;
            display: none;
            padding-bottom: 30px;
            border-bottom: 1px solid rgba(216, 216, 216, 0.5);
        }

        .lianjie {
            width: 974px;
            height: 357px;
            margin: 0 auto;
            /* background-color: darkorange; */
            margin-top: 40px;
        }

        .lianjie>h3 {
            font-size: 18px;
            font-weight: bold;
            color: #555555;
        }

        .shangping {
            float: left;
            display: flex;
            justify-content: space-between;
            height: 323px;
            margin-top: 20px;
        }

        .shangping>li {
            width: 240px;
            height: 329px;
            float: left;
        }

        .shangping>li>a {
            display: block;
            text-decoration: none;
        }

        .shangping>li>a>div {
            width: 220px;
            height: 220px;
            overflow: hidden;
        }

        .shangping>li>a>div>img {
            width: 220px;
            height: 220px;
            transition: all ease-in-out .2s;
        }

        .shangping>li>a>div>img:hover {
            transform: scale(1.2);
            transition: all .6s ease;

        }

        .shangping>li>a>h3 {
            width: 100%;
            height: 19.2px;
            margin-top: 10px;
            text-align: center;
            font-size: 20px;
            color: #adadad;
            font-family: "微软雅黑";
            font-weight: normal;
        }

        .shangping>li>p {
            font-size: 30px;
            text-align: center;
            color: #000000;
            font-family: "georgia";
            /* font-family: "Raleway"; */
        }

        .wuping {
            width: 244px;
            height: 314px;
            /* background-color: cadetblue; */
            float: left;

        }

        .caozuo {
            width: 692px;
            height: 303px;
            /* background-color: chocolate; */
            float: left;
            margin-left: 30px;
        }

        .xian {
            font-weight: normal;
            width: 80px;
            background-color: #dddddd;
            display: block;
            height: 3px;
            margin: 15px 0;
        }

        .jiaqian {
            font-size: 24px;
            font-weight: bold;
            color: #000000;
            line-height: 24px;
            font-family: "arial";
        }

        .miaosu {
            margin: 15px 0px;
            font-size: 14px;
            font-weight: normal;
            color: #777777;
            font-family: "微软雅黑";
        }

        .tianjia {
            height: 59px;
            /* background-color: coral; */
        }

        .hao {
            font-size: 15px;
            font-weight: normal;
            color: #777777;
            border-color: #dddddd;
            padding: 7px 0px;
            border-top: 1px dotted #ddd;
            border-bottom: 1px dotted #ddd;
        }

        .lei {
            font-size: 15px;
            font-weight: normal;
            color: #777777;
            border-color: #dddddd;
            margin-top: 15px;
        }

        .lei>span {
            color: #dd6363;
        }


        #box1 {
            width: 243px;
            height: 243px;
            float: left;
            position: relative;
        }

        #box2 {
            width: 400px;
            height: 398px;
            overflow: hidden;
            /* float: left; */
            position: absolute;
            left: 522px;
            top: 192px;
            border: 1px solid black;
        }
#box1>.jpg{
    width: 100%;
            height: 100%;
}
        #box1 img {
            width: 100%;
            height: 100%;
        }

      .photo{
          width: 100%;
          height: 100%;
          position: absolute;
      }

        #small {
            width: 180px;
            height: 180px;
            background: rgb(238, 229, 230);
            opacity: 0.4;
            position: absolute;
            top: 0;
            left: 0;
        }

        #photo {
            width: 130%;
            height: 130%;
            position: absolute;
           
        }

        .active {
            display: block;
        }

        .close {
            display: none;
        }

        .xiaotu {
            width: 100%;
            height: 70px;
            /* background-color: cornflowerblue; */
        }

        .xiaotu>a {
            display: inline-block;
            width: 60px;
            height: 60px;
        }

        .xiaotu>a>img {
            width: 100%;
            height: 100%;
            margin-top: 7px;
            margin-left: 10px;

        }

        .che {
            float: left;
            display: inline-block;
        }

        .che>button {

            background-image: none;
            font-size: 16px;
            font-weight: normal;
            color: #ffffff;
            border-color: #777777;
            background-color: #777777;
            padding-top: 13px;
            padding-bottom: 13px;
            padding-left: 24px;
            padding-right: 24px;
            width: 132px;
            height: 44px;
            text-align: center;
            line-height: 16px;

        }

        .che>button:hover {
            background-color: #232323;
        }

        .sl {
            width: 96px;
            height: 44px;

            display: flex;
            padding-left: 50px;
        }

        .sl>button {
            border: 1px solid #cccccc;
            height: 44px;
            width: 30px;


            text-align: center;

            font-size: 14px;

            color: #333333;
            font-family: arial;


        }
    </style>
</head>

<body>
    <header></header>
    <section style="height: 952px;">
        <div class="xiang">
            <div class="wuping">
                <div id="box1">
                    <div class="jpg"><img src="./images/4.webp" alt="pho" id="jpg"></div>
                    <div id="small" class="close"></div>
                </div>
                <div id="box2" class="close">
                    <div class="photo">
                        <img src="./images/4.webp" alt="pho" id="photo">
                    </div>
                </div>
                <div class="xiaotu">
                    <a href="" class="a"> <img src="./images/4.webp" alt="" id="xiao"></a>
                </div>
            </div>
            <div class="caozuo">
                <h1>公道杯</h1>
                <div class="xian"></div>
                <p class="jiaqian">￥199.00</p>
                <p class="miaosu">応损捠捡换，攴朰朲朳枛朸桸桹桺奿妀。</p>
                <div class="tianjia">
                    <div class="che"> <button>加入购物车</button></div>
                    <div class="sl">
                        <button class="reduces">-</button>
                        <button class="span">1</button>
                        <button id="ids">+</button>
                    </div>

                </div>
                <div class="hao">商品编号：001003</div>
                <div class="lei">分类：<span> 美之器物</span>,<span> 茶道</span> </div>
            </div>
        </div>
        <div class="news">
            <ul class="xuanze">
                <li>描述</li>
                <li class="pingshu">用户评论(<span>0</span>)</li>
            </ul>
            <div class="p1">
                <p style="color: #808080">当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事。无论您是普通互联网用
                    户，还是专业网站制作人员，都能设计出最具专业水准的网站。当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网
                    站制作和维护成为一件轻松惬意的事。我们的流线式网页布局设计方案和可视化图文内容编辑模式让网 站制作和维护成为一件轻松惬意的事。</p>
                <p style="color: #808080;margin-top: 20px;">
                    当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事。无论您是普通互联网用
                    户，还是专业网站制作人员，都能设计出最具专业水准的网站。我们的流线式网页布局设计方案和可视化图文内容编辑模式让网
                    站制作和维护成为一件轻松惬意的事。我们的流线式网页布局设计方案和可视化图文内容编辑模式让网 站制作和维护成为一件轻松惬意的事。我们的流线式网页布局设计方案和可视化图文内容编辑模式让网
                    站制作和维护成为一件轻松惬意的事。</p>

            </div>
            <div class="p2">

            </div>

            <div class="lianjie">
                <h3>相关商品</h3>
                <ul class="shangping" style="padding-left: 18px;">

                </ul>
            </div>
        </div>
    </section>
    <footer></footer>
</body>

</html>
<script src="./js/jQuery.js"></script>
<script>
    $("header").load("header.html");
    $("footer").load("foot.html");

    function GetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return unescape(r[2]);
        }
        return null;
    };
    var nameVal = GetQueryString("id");
    console.log(nameVal)

    $.get("./goodsAndShoppingCart/getGoodsInfo.php", {
            "goodsId": nameVal
        },
        function (data) {
            console.log(data);
            console.log(data.goodsName);
            show9(data);
        }, "json");

    function show9(data) {
        
        let str = ""
        let str1 = ""
        str = `<img src="${data.beiyong1}" alt="pho" id="jpg">`
        $(".jpg").eq(0).html(str)
        console.log($("#jpg").eq(0).html(str))
        let strr=`<img src="${data.beiyong1}" alt="pho" id="photo">`;
        $(".photo").eq(0).html(strr);
        let strrr=`<img src="${data.beiyong1}" alt="" id="xiao">`;
        $(".a").eq(0).html(strrr);
        
        str1 = "<h1>"+data.goodsName+"</h1>"
        let str3 = `<p class="jiaqian">￥${data.goodsPrice}.00</p>`;
        // $(".caozuo").eq(0).html(str1);
        $(".caozuo").eq(0).children("h1").html(str1);
        $(".jiaqian").eq(0).html(str3);
    }
    console.log($("#ids"));
    $("#ids").click(function () {
        let count = parseFloat($(this).parents("div").find(".span").html());
        count++;
        // console.log(count)
        $(this).parent("div").find(".span").html(count);
    });
    //点击减少的按钮
    $(".reduces").click(function () {
        //1.改变数量 
        var count = parseFloat($(this).parents("div").find(".span").html());
        count--;
        if (count < 1) { //当数量减到1时不能再减
            return;
        }
        $(this).parent("div").find(".span").html(count);
    })




    //链接获取某种商品类型最新的几条商品
    $.get("./goodsAndShoppingCart/getGoodsListNew.php", {
        "typeId": "001",
        "count": 4
    }, function (data) {
        // console.log(data);
        show1(data);
    }, "json");

    function show1(data) {
        let str = "";
        for (let i = 0; i < data.length; i++) {
            str += `
        <li><a href="#">
                        <div>
                            <img src="${data[i].goodsImg}" alt="">
                        </div>
                        <h3>${data[i].goodsName}</h3>
                    </a>
                    <p>￥${data[i].goodsPrice}.00</p>
                </li>`;
        }
        $(".shangping").eq(0).html(str);

    }


    let box1 = document.getElementById('box1'), //获取节点部分
        box2 = document.getElementById('box2'),
        small = document.getElementById('small'),
        photo = document.getElementsByClassName('photo')[0];
    console.log(box2)
    let oLeft = 0,
        oTop = 0,
        x = 0,
        y = 0,
        m = 0,
        n = 0;

    box1.onmouseenter = function () { //设置移入显示事件
        box2.className = 'active';
        small.className = 'active';
    }
    box1.onmouseleave = function () { //设置移除隐藏事件
        box2.className = 'close';
        small.className = 'close';
    }
    console.log($("#small"))
    small.onmouseover = function (e) {
        //设置鼠标按下事件
        x = e.clientX - this.offsetLeft;
        y = e.clientY - this.offsetTop;
        document.onmousemove = function (e) {
            //设置鼠标移动事件
            oLeft = e.clientX - x;
            oTop = e.clientY - y;
            if (oLeft <= 0) { //设置small的移动范围为盒子1
                oLeft = 0;
            }
            if (oLeft >= box1.offsetWidth - small.offsetWidth) {
                oLeft = box1.offsetWidth - small.offsetWidth;
            }
            if (oTop <= 0) {
                oTop = 0;
            }
            if (oTop >= box1.offsetHeight - small.offsetHeight) {
                oTop = box1.offsetHeight - small.offsetHeight;
            }
            m = -(parseInt(((photo.offsetWidth + x) / box2.offsetWidth) * oLeft));
            //核心代码等比例移动
            n = -(parseInt(((photo.offsetHeight + y) / box2.offsetHeight) * oTop));
            small.style.left = oLeft + 'px';
            photo.style.left = m+ 'px';
            small.style.top = oTop + 'px';
            photo.style.top = n + 'px';
        }.bind(this)
        document.onmouseup = function (e) { //设置鼠标移除事件
            document.onmousemove = 'null';
            document.onmouseup = 'null';
        }
    }


    let oul = $(".xuanze").eq(0).children();
    for (let i = 0; i < oul.length; i++) {
        oul[i].style.borderTop = "nonye";

        oul[i].onclick = function () {
            for (var j = 0; j < oul.length; j++) {
                oul[j].style.border = "none";
            }
            if (i == 0) {
                $(".p1").eq(0).css({
                    display: "block"
                });
                $(".p2").eq(0).css({
                    display: "none"
                });
                oul[0].style.borderTop = "3px solid #333";
            }
            if (i == 1) {
                $(".p2").eq(0).css({
                    display: "block"
                });
                $(".p1").eq(0).css({
                    display: "none",
                    height: "127px",
                    margin: "0px"
                });
                oul[1].style.borderTop = "3px solid #333";
            }
        }
    }
    // $(".che").eq(0).children().eq(0).click(function () {
    //     location.href = "shopCart.html";
    // });

    //获取评论接口
    $.get("./goodsAndShoppingCart/getComment.php", {
        "goodsId": nameVal,
        "pageCount": 2,
        "pageIndex": 1
    }, function (data) {
        str = data.data;
        show2(str)
    }, "json");

    function show2(str) {
        // console.log(str);
        json = JSON.parse(str);
        // console.log(json)
        let str1 = "";
        for (let i = 0; i < json.length; i++) {
            // console.log(json[i].vipName);
            // console.log(json.length)
            // console.log(i)

            str1 += `<p style="font-size:13px;color:orange;margin:15px 0px">${json[i].vipName}<span style="margin-left:50px;color:orange;">${json[i].commentTime}</span></p>
   
   <p style="margin-top:20px;font-size:13px">${json[i].content}</p>`;

        }
        $(".p2").eq(0).html(str1);
        $(".pingshu").children("span").html(json.length)
        if (json.length == 0) {
            $(".p2").eq(0).html(`<p>目前还未有评论
<br>
只有买过此商品的客户登录后才能发表评论</p>
          
            `)
        }
        
    }


    console.log($("#ids").eq(0))

    $(".che").eq(0).children().click(function () {

        let x = document.cookie;
        console.log(x)
        if (x == "") {
            $("section").find().css({
                display: "none"
            })
            $("section").html(`<p style="font-size:45px;color:red;text-align:center">请先登录再进入</p>`);

        } else {
            let arr = document.cookie.split('; ') // 将cookie信息和时间戳拆分为数组
            let userInfo = null
            for (let i = 0; i < arr.length; i++) {
                let tempArr = arr[i].split('=') // 将cookie名称和data拆分开，分别是数组的第一个元素和第二个元素
                if (tempArr[0] === "userInfo") {
                    userInfo = JSON.parse(tempArr[1])
                }
            }

            let name = userInfo.username;
            $.post("./goodsAndShoppingCart/addShoppingCart.php", {
                "vipName": name,
                "goodsId": nameVal,
                "goodsCount": document.getElementsByClassName("span")[0].innerHTML
            }, function (data) {
                console.log(data)
                location.href = "shopCart.html?id="+nameVal;
            }, "json");

            
        }
        console.log(location.href)
    })
</script>